<template>
  <div class="app">
    <van-nav-bar title="我的学习" type="primary" :fiexd="true" />
    <LineChart />
    <van-row class="timeBox" type="flex" justify="space-around">
      <van-col span="6">
        <div class="time-min-box">
          <span class="time">{{ todayLearnTime }}</span>
          <span class="unit">min</span>
        </div>
        <div>
          <span class="title">今日学习</span>
        </div>
      </van-col>
      <van-col span="6"
        ><div class="time-min-box">
          <span class="time">{{ continuous }}</span>
          <span class="unit">days</span>
        </div>
        <div>
          <span class="title">连续学习</span>
        </div></van-col
      >
      <van-col span="6">
        <div class="time-min-box">
          <span class="time">{{ total }}</span>
          <span class="unit">h</span>
        </div>
        <div>
          <span class="title">累计学习</span>
        </div>
      </van-col>
    </van-row>
    <div class="lately">
      <div class="top">
        <van-row type="flex" justify="space-between">
          <van-col span="7">
            <div class="latelyTop">最近在学</div>
          </van-col>
          <van-col span="2" @click="latelyClick">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </div>
      <latelyCourse />
    </div>
    <div class="course">
      <van-row type="flex" justify="space-between">
        <van-col span="7">
          <div class="latelyTop">我的课程</div>
        </van-col>
        <van-col span="2" @click="courseClick">
          <van-icon name="arrow" />
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import LineChart from "@/components/lineChart";
import latelyCourse from "@/components/latelyCourse";
import { mapState, mapGetters, mapMutations } from "vuex";

export default {
  components: {
    LineChart,
    latelyCourse,
  },
  computed: {
    ...mapState("user", ["todayLearnTime"]),
    ...mapState("user", ["continuous"]),
    ...mapState("user", ["total"]),
  },
  methods: {
    latelyClick() {
      this.$router.push({
        path: `/mySession/lately/${this.$store.state.mySession.lately}`,
        // params: { list: this.$store.state.mySession.lately },
      });
    },
    courseClick() {
      this.$router.push({
        path: `/mySession/course/${this.$store.state.mySession.mysession}`,
        // params: { list: this.$store.state.mySession.mysession },
      });
    },
  },
};
</script>

<style  lang="scss" scoped>
.app {
  height: 775px;
  background-color: #f4f4f4;
}
.timeBox {
  height: 90px;
  width: 340px;
  margin: 10px auto 0;
  background-color: #fff;
  border-radius: 10px;
  justify-content: space-around;
  .time-min-box {
    margin-top: 20px;
  }
  .time {
    font-size: 22px;
    margin: 0 10px 0 0;
  }
  .unit {
    font-size: 12px;
    color: #797d82;
  }
  .title {
    font-size: 12px;
    margin: 15px auto 20px;
    color: #797d82;
  }
}
.lately {
  height: 190px;
  width: 340px;
  margin: 15px auto 0;
  background-color: #fff;
  border-radius: 10px;
  justify-content: space-around;
  overflow: hidden;
}

.latelyTop {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 18px;
}
.van-icon {
  margin-top: 25px;
  font-size: 15px;
}
.course {
  height: 60px;
  width: 340px;
  margin: 15px auto 75px;
  background-color: #fff;
  border-radius: 10px;
  justify-content: space-around;
  .latelyTop {
    font-size: 15px;
  }
}
</style>